<template>
    <div class="create-exception">
        <div class="background"></div>

        <div class="breadcrumb">
            <el-breadcrumb separatorClass="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>异常类生成</el-breadcrumb-item>
            </el-breadcrumb>

            <el-tag>当前数据库:{{ config.dbName }}</el-tag>
        </div>

        <div>
            <div class="buttons">
                <el-button v-if="recentMVC&&recentMVC.table" type="text"
                           @click="createRecentClick">
                    最近生成MVC：<span v-text="recentMVC.table"></span>
                </el-button>
                <el-button @click="createCustomClick">自定义名称</el-button>
                <el-button @click="createClick">生成异常类</el-button>
            </div>
            <el-table class="table" ref="multipleTable" :data="tableNames" tooltipEffect="dark"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column type="index" width="80" align="center"></el-table-column>
                <el-table-column label="表名" align="center">
                    <template slot-scope="scope">{{ scope.row }}</template>
                </el-table-column>
            </el-table>
        </div>

        <template>
            <ac-create-exception-dialog
                    v-if="ui.createExceptionDialog.visible"
                    :names="selects"
                    :config="config"
                    :dialogVisible="ui.createExceptionDialog.visible"
                    :dialogVisible.sync="ui.createExceptionDialog.visible">

            </ac-create-exception-dialog>

        </template>

    </div>
</template>

<script type="text/ecmascript-6">
    import AcCreateExceptionDialog from "./CreateExceptionDialog";
    /**
     * @author 白雨浓
     * @date 2018/1/29 11:39
     *
     * 异常和枚举
     **/
    export default{
        components: {AcCreateExceptionDialog},
        name: 'AcCreateException',
        data(){
            return {
                ui: {createExceptionDialog: {visible: false}},
                recentMVC: null,
                config: {},
                tableNames: [],
                selects: [],
            }
        },
        beforeMount(){
            const config = this.$storage.local.getItem('config');
            this.config = config.list[config.active];
        },
        mounted(){
            this.$nextTick(() => {
                this.selectTables();
                const recentMVC = this.$storage.session.getItem('recent-mvc');
                if (recentMVC && recentMVC.table) this.recentMVC = recentMVC;
            })
        },
        methods: {
            async selectTables(){
                const data = await this.$db.query('show tables');
                const key = Object.keys(data[0])[0];
                this.tableNames = [];
                data.forEach(item => this.tableNames.push(item[key]));
            },
            createClick(){
                if (this.selects.length !== 0)
                    this.ui.createExceptionDialog.visible = true;
            },
            createRecentClick(){
                this.selects = [this.recentEntity.table];
                this.ui.createExceptionDialog.visible = true;
            },
            createCustomClick(){
                this.$prompt('请输入名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    this.selects = [value];
                    this.ui.createExceptionDialog.visible = true;
                });
            },
            handleSelectionChange(selects){
                this.selects = selects;
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .create-exception {
        .background {
            position fixed
            top 0
            left 0
            z-index -999
            width 100%
            height 100%
            background-image url("../../assets/index/background.png")
            background-size cover
        }

        .breadcrumb {
            display flex
            justify-content space-between
            align-items center
            height 30px
            padding 20px
            background-color rgba(255, 255, 255, .3)
        }

        .table {
            width 70%
            margin auto
        }

        .buttons {
            width 65%
            margin 10px auto
            text-align right
        }
    }
</style>